<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/flexible_css.debug.js"></script>
    <script src="../js/flexible.debug.js"></script>
    <link rel="stylesheet" href="../css/shipin.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
</head>

<body>
    <header class="header">
        <img src="../imgs/8.png" width="100%">
        <a href="shouye.html"><img src="../imgs/2.png" class="imgs"></a>
    </header>
    <section class="set">
        <img src="../imgs/4.png">
    </section>
    <div class="lsmin">

    </div>

    <script type="text/html" id="products-temp">
        {{each lie as v}}
        <section class="techu">


            <div class="imgs">
                <img src="{{v.logoImg}}" width="96%">
            </div>

            <div class="shijian">
                <span class="span">{{v.diZ}}</span>
                <span class="span1">{{v.shiJ}}</span>
                <span class="span2">
            <img src='../imgs/6.png'>
            <span>2</span>
                </span>
            </div>
            <div class="ipone">
                <p class="p_one">{{v.P_one}}!</p>
                <p class="p_two">{{v.p_two}}</p>
                <p class="p_two">{{v.P_three}}</p>
                <p class="p_there"><img src='{{v.pImg}}'></p>
            </div>
        </section>
        {{/each}}
    </script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <script src="../js/dropload.js"></script>
    <script src="../js/artTemplate.js"></script>
    <script>
        $(function() {
            // 页数
            var page = 0;
            // 每页展示5个
            var size = 5;

            $('.lsmin').dropload({
                scrollArea: window,
                threshold: 50, //距离底部50的时候刷新
                loadDownFn: function(me) {
                    //console.log(me);
                    page++;
                    $.ajax({
                        type: "get",
                        url: "../json/chanpin.json",
                        dataType: "json",
                        success: function(data) {
                            //                            var arrLen = data.length;
                            //                            if (arrLen > 0) {
                            //                                data = data.slice(0, 2); //截取data数据
                            //                                var str = template("products-temp", {
                            //                                    lie: data
                            //                                });
                            //                                console.log(str);
                            ////                                模板数据有了
                            //                                $(".sec .art .list").append($(str)); //渲染到页面 
                            //
                            ////                                如果没有数据
                            //                            } else {
                            //                                // 锁定
                            //                                me.lock();
                            //                                // 无数据
                            //                                me.noData();
                            //                            }
                            //                            me.resetload();
                            // 为了测试，延迟1秒加载
                            setTimeout(function() {
                                // 插入数据到页面，放到最后面
                                data = data.slice(0, 2); //截取data数据
                                var str = template("products-temp", {
                                    lie: data
                                });
                                $(".lsmin").append(str); //渲染到页面
                                // 每次数据插入，必须重置
                                me.resetload();
                            }, 1000);
                        },
                        error: function(xhr, type) {
                            //alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>